<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox">全选
                    </th>
                    <th>课程图片</th>
                    <th>课程名称</th>
                    <th>价格</th>
                    <th>优惠</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" @change="changeTotalCheckBox"></td>
                    <td>
                        <img src="" alt="img">
                    </td>
                    <td>
                        
                        <span>name</span>
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        优惠
                    </td>
                    <td>
                        删除
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <td><input type="checkbox">全选</td>
                <td colspan="4" class="total-price">
                    共100元
                </td>
                <td>
                    <button>去结算</button>
                </td>
            </tfoot>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods:{
        changeTotalCheckBox(){
            console.log('changeTotalCheckBox');
            
        }
    }
}
</script>

<style scoped>
table{
    margin: 0 auto;
    width: 1200px;
    border-collapse: collapse;
    border: 1px solid #ccc;
}
th,td{
    border: 1px solid #ccc;
}
.total-price{
    text-align: right;
     
}
</style>
